<template>
  <!-- <div class="ant-descriptions ant-descriptions-bordered">
    <div class="ant-descriptions-title">
      <span>打卡率和达标率</span>
    </div>
    <div
      v-if="report && report.rate && report.punchRate && report.complianceRate"
      :style="{ width: '100%', paddingTop: '3rem' }"
    >
      <line-charts
        :key="initCharts"
        :x-axis-data="charts.axisData"
        :y-axis-unit="charts.axisUnit"
        :legend="charts.legend"
        :series-data="charts.seriesData"
      />
    </div>
    <div v-else>
      <a-empty :image="simpleImage" />
    </div>
  </div> -->
  <div class="container">
    <div style="">
      <div class="card_title">
        <img src="~@/assets/report/first/daka.png" />
        <span>打卡率和达标率</span>
      </div>
      <div class="card_content">
        <line-charts
          :x-axis-data="charts.axisData"
          :y-axis-unit="charts.axisUnit"
          :legend="charts.legend"
          :series-data="charts.seriesData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import LineCharts from '@views/report1/components/LineChart'
import { Empty } from 'ant-design-vue'

export default {
  name: 'PunchRateComplianceRate',
  components: {
    LineCharts
  },
  props: ['report'],
  data() {
    return {
      initCharts: 'init',
      charts: {
        axisData: [],
        axisUnit: '%',
        legend: ['打卡率', '达标率']
      }
    }
  },
  created() {
    //  let tempPunchRate = this.report.punchRate.map((item, index) => {
    //    return this.handleString(item).toString()
    //  })
    //
    //  let tempComplianceRate = this.report.complianceRate.map((item, index) => {
    //    return this.handleString(item).toString()
    //  })
    this.charts.axisData = this.report?.rate
    this.charts.seriesData = this.report?.dataList
  },
  methods: {
    handleString(str) {
      return parseInt(str.split('%')[0])
    }
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  }
}
</script>

<style lang="less" scoped>
@media print {
  .container {
    page-break-after: always;
  }
}
.container {
  padding: 50px 24px 0 24px;
}
.card_title {
  display: flex;
  align-items: center;
  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  span {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }
}
</style>

